<template>
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <Row class="menu">
      <i-col span="24" class="menu_left">
        <Icon type="ios-pin"/>
        <span>您现在的位置是:</span>
        <span class="span">法律援助</span>
      </i-col>
    </Row>

    <Row :gutter="16" class="wrapper">
      <i-col span="24" class="text">
        <span>援助请求题目：</span><Input v-model="value1" style="width: 700px" placeholder="援助请求题目"/>
      </i-col>

      <i-col span="24">
        <span>详细情况说明：</span><Input v-model="value2" style="width: 700px" type="textarea" :rows="4"
                                   placeholder="详细情况说明"/>
      </i-col>

      <i-col span="24" class="text">
        <span>相关证据：</span>
        <input type="file" name="file" class="upload__input" @change="uploadChange">
      </i-col>

      <i-col span="24" class="text">
        <span>联系人姓名：</span><Input v-model="value3" style="width: 700px" placeholder="援助请求题目"/>
      </i-col>

      <i-col span="24" class="text">
        <span>所在单位：</span><Input v-model="value4" style="width: 700px" placeholder="援助请求题目"/>
      </i-col>
    </Row>

    <div style="text-align: center;padding-bottom: 10px">
      <Button type="primary" @click="submit">提交</Button>
    </div>


  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import ngn from '../module/ngn'
  import v_menu from '../module/menu'

  export default {
    components: {carousel, ngn, v_menu},
    data() {
      return {
        /*轮播*/
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        autoplaySpeed: 100000,

        value1: '',
        value2: '',
        value3: '',
        value4: '',
        /*文件*/
        mapData: '',
        file: '',
      }
    },
    methods: {
      uploadChange(event) {
        this.mapData = event.target.files[0];
      },
      submit() {
        let data = {
          title: this.value1,
          particulars: this.value2,
          Contact: this.value3,
          firm: this.value4,
        };
        this.Post(this.$api.url + '/legal/add', this.mapData, data)
      },
      Post(url, file, data) {
        let _this = this;
        let formData = new FormData();
        formData.append("file", file);
        formData.append("legal", JSON.stringify(data));
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        };
        this.$axios.post(url, formData, config).then(function (res) {
          console.log(res)
        });
      }
    },
  }
</script>

<style scoped>
  /*导航菜单*/
  .menu {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }

  .menu_left {
    font-size: 14px;
    padding: 10px 0;
  }

  .menu_right {
    border-left: 1px solid #ccc;
    padding: 9px 0px 7px 20px;
    font-size: 17px;
    color: #007;
    margin-left: 4px;
  }

  .menu .span {
    padding: 0 10px;
  }

  .menu .ivu-icon {
    color: #007;
  }

  .wrapper {
    padding: 15px 10px;
  }

  .wrapper span {
    font-size: 15px;
    display: inline-block;
    width: 120px;
  }

  .text {
    padding: 10px 0;
  }
</style>
